$border-color-blue:#1955AF;
$bg-blue:#EEF6FD;

$border-color-green:#68A820;
$bg-green:#F7FDF1;

$border-color-orange:#CAA513;
$bg-orange:#FFFBED;

$border-color-red:#C73036;
$bg-red:#FDF1F1;

.el-message {
  min-width: 380px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: $border-color-blue;
  position: fixed;
  left: 50%;
  top: 20px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: $bg-blue;
  -webkit-transition: opacity .3s, top .4s, -webkit-transform .4s;
  transition: opacity .3s, top .4s, -webkit-transform .4s;
  transition: opacity .3s, transform .4s, top .4s;
  transition: opacity .3s, transform .4s, top .4s, -webkit-transform .4s;
  overflow: hidden;
  padding: 16px 16px 16px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

}
.el-message--info .el-message__content {
  color:$border-color-blue;
}
.el-message__closeBtn {
  color:$border-color-blue;
}

.el-message__closeBtn:hover {
  color:$border-color-blue;
}
.el-message .el-icon-info{
  color:$border-color-blue;
}


.el-message--success {
  background-color: $bg-green;
  border-color: $border-color-green;
}
.el-message.el-message--success .el-message__content {
  color: $border-color-green;
}
.el-message--success .el-message__closeBtn {
  color:$border-color-green;
}
.el-message.el-message--success .el-message__closeBtn:hover {
  color:$border-color-green;
}
.el-message--success .el-icon-success{
  color:$border-color-green;
}

.el-message--warning {
  background-color: $bg-orange;
  border-color: $border-color-orange;
}
.el-message--warning .el-message__content {
  color: $border-color-orange;
}
.el-message--warning .el-message__closeBtn {
  color:$border-color-orange;
}
.el-message--warning .el-message__closeBtn:hover {
  color:$border-color-orange;
}
.el-message--warning .el-icon-warning{
  color:$border-color-orange;
}

.el-message--error {
  background-color: $bg-red;
  border-color: $border-color-red;
}
.el-message--error .el-message__content {
  color: $border-color-red;
}
.el-message--error .el-message__closeBtn {
  color:$border-color-red;
}
.el-message--error .el-message__closeBtn:hover {
  color:$border-color-red;
}
.el-message--error .el-icon-error{
  color:$border-color-red;
}


.el-alert--info.is-light{
  background-color: $bg-blue;
  color: $border-color-blue;
}
.el-alert--success.is-light{
  background-color: $bg-green;
  color: $border-color-green;
}
.el-alert--warning.is-light{
  background-color: $bg-orange;
  color: $border-color-orange;
}
.el-alert--error.is-light{
  background-color: $bg-red;
  color: $border-color-red;
}





























